<template>
  <div style="width: 100%; height: 250px">
    <div
      id="pm25Chart"
      ref="pm25ChartDom"
      class="mt-4"
      style="width: 100%; height: 250px"
    />
  </div>
</template>

<script setup lang="ts" name="BarChart1">
import * as echarts from "echarts";
import { onMounted, ref, watch } from "vue";
import { listResultByProvinces } from "@/api/aqiMeasuredResult";
import { eventBus } from "./eventBus.js";

defineOptions({
  name: "BarChart1"
});

const pm25ChartDom = ref(null);

const pm25Option = {
  animation: true, // 开启动画
  animationDuration: 1000, // 动画持续时间
  animationDelay: 0, // 动画延迟时间
  animationEasing: "linear", // 动画缓动函数
  title: {
    text: "悬浮颗粒物（PM2.5）浓度超标累计",
    left: "center",
    textStyle: {
      color: "white",
      fontSize: 13
    }
  },
  tooltip: {
    trigger: "axis",
    axisPointer: {
      type: "shadow"
    }
  },
  grid: {
    left: "3%",
    right: "4%",
    bottom: "3%",
    containLabel: true
  },
  xAxis: [
    {
      type: "category",
      data: [],
      axisTick: {
        alignWithLabel: true
      },
      realtimeSort: true,
      inverse: true
    }
  ],
  yAxis: [
    {
      type: "value"
    }
  ],
  series: [
    {
      name: "PM2.5",
      type: "bar",
      barWidth: "60%", // 调整柱状图宽度
      data: [],
      itemStyle: {
        color: "steelblue"
      }
    }
  ]
};

const tableData = ref([]);

const getTableData = async () => {
  const { data } = await listResultByProvinces();
  tableData.value = data;
  console.log(tableData.value, "tableData");
};

const provinceName = ref([]);

onMounted(() => {
  let pm25Chart = echarts.init(pm25ChartDom.value);
  pm25Option && pm25Chart.setOption(pm25Option);

  getTableData();
  watch(tableData, newVal => {
    if (newVal && newVal.length > 0) {
      pm25Option.xAxis[0].data = newVal.map(item => item.provinceName);
      pm25Option.series[0].data = newVal.map(item => {
        return {
          value: item.pmCount,
          itemStyle: {
            color: "steelblue"
          }
        };
      });
      pm25Chart.setOption(pm25Option);
    }
  });
  // 接收数据
  eventBus.on("name-updated", name => {
    console.log("接收到的name为：", name);
    provinceName.value = name;
    console.log(provinceName.value, "provinceName");
    // 更新图表数据
    const index = tableData.value.findIndex(item => item.provinceName === name);
    if (index !== -1) {
      const newData = tableData.value.map((item, i) => {
        return {
          value: item.pmCount,
          itemStyle: {
            color:
              i === index
                ? {
                    type: "linear",
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                      {
                        offset: 0,
                        color: "#64A4D6" // 起始颜色
                      },
                      {
                        offset: 1,
                        color: "#C782C2" // 结束颜色
                      }
                    ],
                    global: false // 缺省为 false
                  }
                : "steelblue"
          }
        };
      });

      pm25Option.xAxis[0].data = tableData.value.map(item => item.provinceName);
      pm25Option.series[0].data = newData;

      pm25Chart.clear();
      pm25Chart = echarts.init(pm25ChartDom.value);
      pm25Chart.setOption(pm25Option);
    } else {
      // 如果点击的省份在tableData中不存在，保持原有颜色
      const originalData = pm25Option.series[0].data.map(item => {
        return {
          value: item.value,
          itemStyle: {
            color: "steelblue"
          }
        };
      });

      pm25Option.series[0].data = originalData;
      pm25Chart.setOption(pm25Option);
    }
  });
});
</script>

<style scoped></style>
